<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSONP</title>
</head>

<body>
  <button>JSONP</button>
  <script>
    /* 
      JSONP 是早期实现跨域的一种方式，其核心思想是利用浏览器请求不会被浏览器同源策略所限制这一特性来实现跨域
    */

    // JSONP 回调函数
    function query(data) {
      console.log(data)
    }

    // 获取节点
    const oBtn = document.querySelector('button')
    let oScript = null
    oBtn.onclick = function () {
      if (oScript) {
        oScript.remove()
      }
      oScript = document.createElement('script')
      oScript.src = 'http://127.0.0.1/jsonp?callback=query'
      document.body.appendChild(oScript)
    }
  </script>
</body>

</html>